import React from 'react';
import { sleep } from 'antd-mobile/es/utils/sleep';
import styles from '@/assets/css/coupon.module.css';

const Coupon = () => {
  let [active, SetActive] = React.useState('all');
  let [couponlist, SetcouponList] = React.useState<any>([]);
  let [hasMore, SethasMore] = React.useState(false);

  React.useEffect(() => {
    GetCouponData();
  }, []);

  //下拉刷新
  const OnRefresh = async () => 
  {
    SethasMore(true);
    SetcouponList([]);

    await sleep(1000);
    await GetCouponData();
  };

  //请求
  const GetCouponData = async () => 
  {
    let data = [
      {
        id: 1,
        cid: 9,
        coupon: {
          rate: '0.20',
          createtime_text: '2024-10-30',
          endtime_text: '2024-11-30',
          total: 100,
          title: '双十一优惠券',
        },
        status: '0',
      },
      {
        id: 2,
        cid: 7,
        coupon: {
          rate: '0.50',
          createtime_text: '2024-10-30',
          endtime_text: '2024-11-30',
          total: 100,
          title: '年终大促',
        },
        status: '1',
      },
    ];

    SethasMore(false);
    SetcouponList([...couponlist, ...data]);
  };

  //上拉加载
  const LoadMore = async () => 
  {
    await sleep(1000);
    GetCouponData();
  };

  //选项卡切换
  const TabChange = async (key: string) => 
  {
    SetActive(key);
    await sleep(1000);
    await OnRefresh();
  };
  return (
    <>
      <React.UI.Tabs
        onChange={TabChange}
        activeKey={active}
        activeLineMode={'full'}
      >
        <React.UI.Tabs.Tab title="全部" key="all" />
        <React.UI.Tabs.Tab title="未使用" key="1" />
        <React.UI.Tabs.Tab title="已使用" key="0" />
      </React.UI.Tabs>
      <React.UI.PullToRefresh onRefresh={OnRefresh}>
        {/* 列表结构 */}
        <React.UI.List>
          <div className={styles.coupon_list}>
            {couponlist.map((item: any) => {
              return (
                <div className={styles.coupon_item} key={item.id}>
                  <div className={styles.item_content}>
                    <React.Router.NavLink to={`/coupon/info?cid=${item.cid}`}>
                      <div className={styles.left}>
                        {parseFloat(item.coupon.rate) * 100}
                        <span>折</span>
                      </div>
                      <div className={styles.right}>
                        <div>{item.coupon.title}</div>
                        <div>开始时间：{item.coupon.createtime_text}</div>
                        <div>结束时间：{item.coupon.endtime_text}</div>
                        <div>领取仅限量 {item.coupon.total} 张，赶快领取！</div>
                      </div>
                    </React.Router.NavLink>
                  </div>
                  <div className={styles.item_btn}>
                    {item.status == '1' ? (
                      <React.UI.Button color="primary">未使用</React.UI.Button>
                    ) : (
                      <React.UI.Button color="primary" disabled>
                        已使用
                      </React.UI.Button>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        </React.UI.List>
        {/* 上拉加载 */}
        <React.UI.InfiniteScroll
          loadMore={LoadMore}
          hasMore={hasMore}
          threshold={0}
        />
      </React.UI.PullToRefresh>
    </>
  );
};

export default Coupon;
